<!doctype html>
<style>
	img{width:300px;margin:200px}
	/*底部倒影*/
	.normal{-webkit-box-reflect:below 5px}
	/*顶部倒影*/
	.top{-webkit-box-reflect:above}
	/*左侧倒影*/
	.left{-webkit-box-reflect:left}
	/*右侧倒影*/
	.right{-webkit-box-reflect:right}
	/*文字倒影*/
	P{font-size:36px;-webkit-box-reflect:below -10px -webkit-linear-gradient(top,transparent 20%,#fff)}
	
	/**/
	.water{-webkit-box-reflect:below 3px -webkit-linear-gradient(top,transparent 20%,#fff)}
	
</style>
<img class="normal" src="demo.jpg">
<hr>
<img class="top" src="demo.jpg">
<hr>
<img class="left" src="demo.jpg">
<hr>
<img class="right" src="demo.jpg">
<hr>
<p>锄禾日当午<p>
<p>汗滴禾下土<p>
<p>谁知盘中餐<p>
<p>粒粒皆辛苦<p>
<hr>
<img class="water" src="demo.jpg" >